// Created by liusc on 2020/7/28--11:17.
<template>
  <div>
    <el-dialog :title="isEdit?'编辑':'新增'" :visible.sync="dialogVisible" width="1200px" :close-on-click-modal="false">
      <el-form ref="edit-dialog" :model="form" :rules="rules" class="form-wrap">
        <el-form-item label="街道名称" prop="streetName">
          <el-select v-model="form.streetName" @change="changeStreet" placeholder="请选择街道名称">
            <el-option v-for="item in streetsLists" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="社区名称" prop="communityName">
          <el-select v-model="form.communityName" placeholder="请选择社区名称">
            <el-option v-for="item in communityNames" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="管理人口" prop="population">
          <el-input maxlength="8" v-model="form.population" placeholder="请输入管理人口"></el-input>
        </el-form-item>

        <el-form-item label="设施类型" prop="facilitiesType">
          <el-select v-model="form.facilitiesType" placeholder="请选择设施类型" @change="handleSelect(form.facilitiesType)">
            <el-option v-for="item in deviceTypesLists" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="具体类型" prop="facilitiesSubtype">
          <el-select v-model="form.facilitiesSubtype" placeholder="请选择具体类型">
            <el-option v-for="item in specificTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="近期需求" prop="reqNum">
          <el-input maxlength="12" v-model="form.reqNum" placeholder="请输入近期需求">
            <template slot="append">{{ reqNumAppend }}</template>
          </el-input>
        </el-form-item>
        <el-form-item label="需求个数" prop="requirements">
          <el-input maxlength="8" v-model="form.requirements" placeholder="请输入需求个数"></el-input>
        </el-form-item>

        <!-- <el-form-item label="物业位置" prop="address">
                    <el-input v-model="form.address" placeholder="请输入物业位置">
                    </el-input>
        </el-form-item>-->

        <el-form-item label="备注" class="full" prop="remarks">
          <el-input maxlength="100" v-model="form.remarks" type="textarea" placeholder="请输入备注"></el-input>
        </el-form-item>

        <el-form-item label="主键ID" prop="demandId" style="display: none;">
          <el-input v-model="form.demandId" type="hidden"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" v-throttle="[commit]">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { doubleValidate, isInt } from '~/utils/validate.js'
export default {
  name: "edit-match-info",
  data () {
  	let validatorReqNumAppend = (rule, value, callback) => {
			if (!value) {
				callback();
			}
			this.validateReqNum(rule, value, callback)
		}
    return {
      dialogVisible: false,
      form: {
        demandId: '',
        streetName: '',
        communityName: '',
        facilitiesType: '',
        facilitiesSubtype: '',
        reqNum: '',
        address: '',
        remarks: '',
        population: '',
        requirements: ''
      },
      rules: {
        streetName: [
          { required: true, message: '请选择街道名称', trigger: 'change' },
        ],
        communityName: [
          { required: true, message: '请选择社区名称', trigger: 'change' },
        ],
        facilitiesType: [
          { required: true, message: '请选择设备类型', trigger: 'change' },
        ],
        facilitiesSubtype: [
          { required: true, message: '请选择具体类型', trigger: 'change' },
        ],
        reqNum: [
          { required: true, message: '请输入近期需求', trigger: 'blur' },
          { validator: validatorReqNumAppend, trigger: "blur" },
        ],
        population: [
          { required: true, message: '请输入管理人口', trigger: 'blur' },
          {
            validator (rule, value, callback) {
              if (Number.isInteger(Number(value)) && Number(value) > 0) {
                callback();
              } else {
                callback(new Error("请输入有效数字"));
              }
            },
            trigger: 'blur',
          },
        ],
        requirements: [
          { required: true, message: '请输入需求个数', trigger: 'blur' },
          {
            validator (rule, value, callback) {
              if (Number.isInteger(Number(value)) && Number(value) > 0) {
                callback();
              } else {
                callback(new Error("请输入有效数字"));
              }
            },
            trigger: 'blur',
          },
        ],
        address: [
          { required: true, message: '请输入物业位置', trigger: 'blur' },
        ],

      },
      isEdit: false,
      streetsLists: [],
      communityLists: [],
      deviceTypesLists: [],
      specificList: [],
      specificTypes: [],
      communityNames: [],
      reqNumAppend: 'M²'
    }
  },

  mounted () {
  },

  created () {
    this.streetsLists = this.getDict('streets');
    this.communityLists = this.getDict('community_names');
    this.deviceTypesLists = this.getDict('device_types');
    this.specificList = this.getDict('specific_types');
  },
  methods: {
    show (data) {
      this.dialogVisible = true
      this.isEdit = false
      this.$nextTick(function () {
        this.$refs['edit-dialog'].resetFields()
        if (data) {
          this.isEdit = true
          let form = {}
          this.form = Object.keys(this.form).forEach(key => {
            form[key] = data[key]
          })
          this.form = form
          this.communityNames = this.communityLists.filter(cm => cm.value.indexOf(this.form.streetName) == 0);
          this.specificTypes = this.specificList.filter(st => st.value.indexOf(this.form.facilitiesType) === 0);
        }
      })
    },

    commit () {
      this.$refs['edit-dialog'].validate(valid => {
        if (valid) {
          let params = Object.assign({}, this.form)
          this.dialogVisible = false
          if (this.isEdit) {
            this.$emit('updateData', params)
          } else {
            this.form.id = new Date().getTime()
            this.$emit('addData', params)
          }
        }
      })
    },
    // hxf-0902-具体类型随设施类型变化
    handleSelect (val) {
      this.form.facilitiesSubtype = ''
      this.form.reqNum = ''
      this.specificTypes = this.specificList.filter(it => it.value.substring(0, 3) === val)
      if (val === '110') {
        this.reqNumAppend = '班'
      } else if (val === '120') {
        this.reqNumAppend = '箱'
      } else if (val === '130') {
        this.reqNumAppend = '座'
      } else {
        this.reqNumAppend = 'M²'
      }
    },
    changeStreet (val) {
      this.form.communityName = ''
      this.communityNames = this.communityLists.filter(cm => cm.value.indexOf(val) == 0);
    },
		validateReqNum(rule, value, callback) {
    	if (this.reqNumAppend === 'M²') {
				doubleValidate(rule, value, callback)
			} else {
				isInt(rule, value, callback)
			}
		}
  }
}
</script>

<style scoped lang='scss'>
@include formWrap(4);
</style>

